<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title th:text="${title}">提交订单 - 点餐系统</title>
    <link rel="stylesheet" th:href="@{/css/element-ui.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<div id="app">
    <!-- 顶部导航 -->
    <div class="header">
        <div class="header-back" @click="goBack">
            <i class="el-icon-arrow-left"></i>
        </div>
        <div class="header-title" th:text="${title}">提交订单</div>
    </div>

    <!-- 订单表单 -->
    <div class="order-container">
        <!-- order.html -->
        <div class="order-form">

            <!-- 客户信息 -->
            <div class="form-section">
                <div class="section-title">👤 你的信息</div>
                <div class="form-group">
                    <input
                            type="text"
                            class="form-input"
                            placeholder="请输入你的名字"
                            v-model="order.customerName"
                            maxlength="10">
                </div>
            </div>

            <!-- [位置调整] 处理人选择，放在用户信息之后，更符合逻辑 -->
            <div class="form-section">
                <div class="section-title">👨‍🍳 指定处理人</div>
                <div class="form-group">
                    <!-- [核心修改] v-model 直接绑定到 order.handlerOpenId -->
                    <el-select
                            v-model="order.handlerOpenId"
                            placeholder="请选择谁来处理这个订单"
                            style="width: 100%;"
                            filterable
                            clearable>
                        <!-- [核心修改] v-for 循环 filteredHandlerList -->
                        <el-option
                                v-for="handler in filteredHandlerList"
                                :key="handler.openId"
                                :label="handler.nickname"
                                :value="handler.openId">

                            <span style="float: left; font-weight: 500;">{{ handler.nickname }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px;">{{ handler.username }}</span>
                        </el-option>
                    </el-select>
                </div>
            </div>

            <!-- 订单详情 -->
            <div class="form-section">
                <div class="section-title">🛒 订单内容</div>
                <div class="order-items">
                    <div
                            v-for="(item, index) in cartItems"
                            :key="index"
                            class="order-item">
                        <span class="item-name">{{ item.name }}</span>
                        <span class="item-quantity">×{{ item.quantity }}</span>
                    </div>
                </div>
            </div>

            <!-- 备注 -->
            <div class="form-section">
                <div class="section-title">📝 备注信息</div>
                <div class="form-group">
            <textarea
                    class="form-textarea"
                    placeholder="有什么特殊要求吗？比如：少辣、不要葱..."
                    v-model="order.note"
                    maxlength="100"
                    rows="3"></textarea>
                    <div class="char-count">{{ order.note ? order.note.length : 0 }}/100</div>
                </div>
            </div>

        </div>
    </div>

    <!-- 底部提交按钮 -->
    <div class="submit-footer">
        <button
                class="submit-btn"
                :class="{ 'disabled': !canSubmit }"
                :disabled="!canSubmit"
                @click="submitOrder">
            {{ submitting ? '提交中...' : '确认下单' }}
        </button>
    </div>
</div>

<script th:src="@{/lib/vue.js}"></script>
<script th:src="@{/lib/element-ui.js}"></script>
<script th:src="@{/lib/axios.js}"></script>
<script th:src="@{/lib/api.js}"></script>
<script th:src="@{/js/front/order.js}"></script>
</body>
</html>